<template>
	<cover-view class="tab-bar">
	  <cover-view class="tab-bar-border"></cover-view>
	  <cover-view v-for="(item, index) in list" :key="index" class="tab-bar-item" :data-path="item.pagePath" :data-index="index" @click="switchTab">
	    <cover-image :src="selected === index ? item.selectedIconPath : item.iconPath"></cover-image>
	    <!-- <cover-view :style="{color: selected == index ? selectedColor : color}">{{item.text}}</cover-view> -->
	    <cover-view :style="{color: selected == index ? selectedColor : color}">{{item.text}}</cover-view>
	  </cover-view>
	</cover-view>
</template>

<script>
	export default {
    computed: {
      comColor() {
        return this.selected
      }
    },
		/**
		 * 组件的初始数据
		 */
		data() {
      return {
        selected: '',
        color: "red",
        selectedColor: "#fff",
        backgroundColor: "#000",
        list: [
          {
            pagePath: "/pages/home/home",
            text: "首页",
            iconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png",
            selectedIconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png"
          // },
          // {
          //   pagePath: "/pages/item/search",
          //   text: "分类",
          //   iconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png",
          //   selectedIconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png"
          }, {
            pagePath: "/pages/cart/cart",
            text: "购物车",
            iconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png",
            selectedIconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png"
          },
          // {
          //   pagePath: "/pages/customer/customer",
          //   text: "会员中心",
          //   iconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png",
          //   selectedIconPath: "https://100000063-1252208446.file.myqcloud.com/images/alert.png"
          // }
        ]
      }
    },

    mounted() {
      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
          this.getTabBar().selected = 0
      }
    },
		/**
		 * 组件的方法列表
		 */
		methods: {
		  switchTab(e) {
		    const data = e.currentTarget.dataset
		    const url = data.path
 
        this.selected = data.index
   
		// uni.switchTab({
			uni.relaunch({ url })
		    // wx.switchTab({ url })
		  }
		}
	}
  // custom-tab-bar/tabbar.js
  // Component({
  //   /**
  //    * 组件的属性列表
  //    */
  //   properties: {

  //   },


  // })
</script>

<style>
/* custom-tab-bar/tabbar.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: black;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
</style>
